<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			svg{stroke: black;fill: none;width:500px;height:500px;}
			path{stroke: black;fill: none;}
			
		</style>
	</head>
	<body>
		
		<h4>设置patternUnits 为 objectBoundingBox</h4>
		<svg>
			<defs>
				<pattern id="tile" x="0" y="0" width="20%" height="20%" patternUnits="objectBoundingBox">
					<path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black;fill:none;" />
					
					<path d="M 0 0 h 20 v 20 h -20 z" />
				</pattern>
			</defs>
			
			<rect x="20" y="20" width="100" height='100' style="fill:url(#tile);stroke:black;" />
			
			<rect x="135" y="20" width="70" height="80" style="fill:url(#tile);stroke: black;" />
			
			<rect x="220" y="20" width="150" height="130" style="fill:url(#tile);stroke: black;" />
		</svg>
		
		<h4>设置patternUnits 为 userSpaceOnUse</h4>
		<svg>
			<defs>
				<pattern id="tile2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
					<path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black;fill:none;" />
					
					<path d="M 0 0 h 20 v 20 h -20 z" />
				</pattern>
			</defs>
			
			<rect x="20" y="20" width="100" height='100' style="fill:url(#tile2);stroke:black;" />
			
			<rect x="135" y="20" width="70" height="80" style="fill:url(#tile2);stroke: black;" />
			
			<rect x="220" y="20" width="150" height="130" style="fill:url(#tile2);stroke: black;" />
		</svg>
		
		<h4>如果没有指定patternUnits值，默认为objectBoundingBox</h4>
	</body>
</html>
